<template>
  <div class="search" style="display: flex">
    <van-icon
      @click="goOne"
      style="margin-top: 15px"
      size="26"
      color="rgb(136,136,136)"
      name="arrow-left"
    />

    <van-search
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      style="flex: 1"
    >
      <template #action>
        <van-icon color="rgb(136,136,136)" size="26" name="chat-o" />
      </template>
    </van-search>
  </div>
  <div class="List-top" style="display: flex; width: 100%; align-items: center">
    <van-dropdown-menu style="width: 50%">
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" :options="option2" />
    </van-dropdown-menu>
    <div style="display: flex; justify-content: space-around; width: 50%">
      <div @click="showPopup">分类</div>
      <div @click="changeLayout"><van-icon name="apps-o" /></div>
    </div>
  </div>
  <div
    class="List-con"
    style="display: flex; justify-content: space-between; flex-wrap: wrap"
    :class="{ active: layout == '1' }"
  >
    <div
      class="List-item"
      @click="navTo('/deta?id=' + item._id)"
      v-for="item in list"
    >
      <div class="List-img">
        <img :src="item.goods_thumb" alt="" />
      </div>
      <div class="List-nr" style="font-size: 12px">
        {{ item.name }}
      </div>
      <div
        class="List-num"
        style="display: flex; justify-content: space-between"
      >
        <div class="left" style="font-size: 16px; color: rgb(252, 98, 23)">
          {{ item.price / 100 }}
        </div>
        <div class="right" style="font-size: 12px">98%的好评</div>
      </div>
    </div>
  </div>
  <!-- 右侧弹出 -->
  <van-popup
    v-model:show="showRight"
    position="right"
    :style="{ width: '60%', height: '100%' }"
    ><van-collapse v-model="activeNames">
      <van-collapse-item title="洗发水" name="1">
        <div class="box" style="background-color: #f4f5f5">
          <div>去屑</div>
          <div>止痒</div>
          <div>去屑止痒</div>
          <div>修复</div>
          <div>滋养头皮</div>
        </div>
      </van-collapse-item>
      <van-collapse-item title="洗面奶" name="2">
        技术无非就是那些开发它的人的共同灵魂。
      </van-collapse-item>
      <van-collapse-item title="牙膏" name="3">
        在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
      </van-collapse-item>
    </van-collapse>
  </van-popup>
</template>
<script setup>
import { ref, onMounted, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getGoodsList } from "@/api/index.js";
const HomeInfo = reactive({
  GoodsList: [],
});
const route = useRoute();
const router = useRouter();
const goOne = () => {
  router.push({
    name: "sort",
  });
};
let category_ids = ref("");
let list = ref([]);
let layout = ref("2"); //  2
function changeLayout(params) {
  layout.value = layout.value === "1" ? "2" : "1";
}
onMounted(() => {
  category_ids.value = route.query.id;
  getList();
});

function getList() {
  getGoodsList({
    category_ids: category_ids.value,
  }).then((res) => {
    console.log(res);
    list.value = res.rows;
  });
}
const value1 = ref(0);
const value2 = ref("a");
const option1 = [
  { text: "全部商品", value: 0 },
  { text: "新款商品", value: 1 },
  { text: "活动商品", value: 2 },
];
const option2 = [
  { text: "默认排序", value: "a" },
  { text: "好评排序", value: "b" },
  { text: "销量排序", value: "c" },
];
const showRight = ref(false);
const showPopup = () => {
  showRight.value = true;
};
const activeNames = ref(["1"]);
</script>
<style>
.List-item {
  width: 48%;
  padding: 10px 10px;
  margin-top: 10px;
  background-color: white;
}
.List-item img {
  width: 100%;
}
.List-con {
  background: #f4f4f4;
}
.van-dropdown-menu__bar {
  box-shadow: none;
}
.van-collapse-item__content {
  padding: 0;
}
.box {
  padding-left: 30px;
}
.box div {
  padding: 10px 0;
  color: black;
}

.List-con.active {
  align-content: normal;
  flex-direction: column;
}
.List-con.active .List-item {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.List-con.active .List-item img {
  width: 80px;
  height: 80px;
}
</style>
